<template>
  <div class="index">
    <div class="banner"></div>
    <el-row>
      <el-col :span="4">
        <el-menu default-active="1" class="el-menu-vertical-demo" router unique-opened>
          <el-menu-item index="Info">
            <i class="el-icon-information"></i>个人中心
          </el-menu-item>
          <el-submenu index="Trade">
            <template slot="title"><i class="el-icon-menu"></i>交易大厅</template>
            <el-menu-item index="Trade">交易列表</el-menu-item>
            <el-menu-item index="1-2">交易记录</el-menu-item>
          </el-submenu>
          <el-submenu index="Order">
            <template slot="title"><i class="el-icon-document"></i>订单管理</template>
            <el-menu-item index="1-1">订单列表</el-menu-item>
            <el-menu-item index="1-2">财务列表</el-menu-item>
          </el-submenu>

          <el-submenu>
            <template slot="title"><i class="el-icon-setting"></i>偏好设置</template>
            <el-menu-item-group>
              <template slot="title">游戏</template>
              <el-menu-item index="1-1">出售设置</el-menu-item>
              <el-menu-item index="1-2">比例设置</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="软件">
              <el-menu-item index="1-3">购买软件</el-menu-item>
              <el-menu-item index="1-3">注册管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="more">
            <template slot="title"><i class="el-icon-plus"></i>自助服务</template>
            <el-menu-item-group>
              <template slot="title">自动发货</template>
              <el-menu-item index="1-1">立即拿货</el-menu-item>
              <el-menu-item index="1-2">拿货记录</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Kvv指数">
              <el-menu-item index="1-3">3099指数</el-menu-item>
              <el-menu-item index="1-3">7505指数</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="Info">
            <i class="fa fa-book"></i>在线学堂
          </el-menu-item>
          <el-menu-item index="3"><i class="el-icon-warning"></i>账号安全</el-menu-item>
        </el-menu>
      </el-col>

      <el-col :span="20" class="page">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'index',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .index {
    min-height: 600px;
  }
  .el-menu-item [class^=fa] {
    vertical-align: baseline;
    margin-right: 8px;
  }
  .banner {
    height: 120px;
  }
  .page{
    padding: 20px 40px;
  }
</style>
